<!-- src/components/TeacherRegister.vue -->
<template>
  <div class="register-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h1>教师注册</h1>
        </div>
      </template>
      <el-form @submit.prevent="register" :model="form" label-width="80px" ref="registerForm">
        <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="form.username" required></el-input>
        </el-form-item>
        <el-form-item label="真名" prop="realName" :rules="[{ required: true, message: '请输入真名', trigger: 'blur' }]">
          <el-input v-model="form.realName" required></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :rules="[{ required: true, message: '请选择性别', trigger: 'change' }]">
          <el-select v-model="form.gender" placeholder="请选择性别" required>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' }]">
          <el-input v-model="form.phone" required></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input type="password" v-model="form.password" required></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]">
          <el-input v-model="form.email" required></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]">
          <el-input v-model="form.address" required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" @click="register">提交</el-button>
          <el-button type="default" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        realName: '',
        gender: '',
        phone: '',
        password: '',
        email: '',
        address: ''
      }
    };
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 这里可以添加教师注册逻辑
          console.log('教师注册:', this.form);

          axios.post("/api/teacher/regist",this.form).then(response => {
            console.log(response.data)
            this.$router.push({path:"/"})
          }).catch( err=> {
            //console.log(err.response)
            console.log(err.response.data.message)
            this.$message.error(err.response.data.message)
          })

        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.registerForm.resetFields();
    }
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box-card {
  width: 400px;
}

.card-header {
  text-align: center;
}
</style>
